<template>
  <el-row style="margin: 10px;">
    <el-col :span="8">
      <div>
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>
                <el-avatar :size="55" :src="user" />
              </span>
              <div class="userInfo">
                <p class="name">Admin</p>
                <p class="access">超级管理员</p>
              </div>
            </div>
          </template>
          <div class="text item">
            <p>
              上次登陆：
              <span>2022-04-01</span>
            </p>
            <p>
              登陆地点：
              <span>四川自贡</span>
            </p>
          </div>
        </el-card>
        <el-card style="margin-top: 10px; height: 420px;">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column v-for="(item, key) in tableCol" :key="key" :prop="key" :label="item" />
          </el-table>
        </el-card>
      </div>
    </el-col>
    <el-col :span="16">
      <div class="conts">
        <el-card v-for="item in countData" :key="item.name">
          <el-icon>
            <component :is="item.icon"></component>
          </el-icon>
          <div class="detail">
            <p class="num">{{ item.value }}</p>
            <p class="txt">{{ item.name }}</p>
          </div>
        </el-card>
      </div>
      <el-card style="height: 230px; margin: 10px; text-align: center;">
        <v-chart style="height: 230px;width: 100%;" :option="lines"></v-chart>
      </el-card>
      <div class="graph">
        <el-card style="height: 260px; width: 50%;">
          <v-chart style="height: 260px;" :option="bars"></v-chart>
        </el-card>
        <el-card style="height: 260px; width: 50%;">
          <v-chart style="height: 260px;" :option="option"></v-chart>
        </el-card>
      </div>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import user from '@/assets/logo.png';
import { getCurrentInstance, onMounted, ref } from 'vue';
import { getData } from '@/utils/data'
const { proxy }  = getCurrentInstance()
onMounted(() => {
  proxy.axios(getData()).then((res: any) => {
    const { code, data } = res.data;
    if (code === 2000) {
      tableData.value = data.tableData;

      // 饼图
      option.value.series[0].data = data.videoData;
      // 折线图
      const orderData = data.orderData;
      lines.value.xAxis.data = orderData.date;
      lines.value.legend.data = Object.keys(orderData.data[0]);
      lines.value.legend.data.forEach(key => {
        lines.value.series.push({
          name: key,
          type: 'line',
          data: orderData.data.map(item => item[key])
        })
      })
      // 柱状图
      bars.value.xAxis.data = data.userData.map(item => item['date']);
      bars.value.legend.data = ['新用户', '活跃用户'];
      bars.value.series.push({
        name: '新用户',
        type: 'bar',
        data: data.userData.map(item => item.new)
      });
      bars.value.series.push({
        name: '活跃用户',
        type: 'bar',
        data: data.userData.map(item => item.active)
      })
    }
    
  }).catch((err: any) => {
    console.log('err----', err);
  })
  // proxy.axios.get('/user?id=12345').then((res) => {
  //   console.log(res)
  // }).catch((err) => {
  //   console.log(err)
  // })

})

// 折线图
const lines = ref({
  title: {
    text: '折线图'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: []
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: []
  },
  yAxis: {
    type: 'value'
  },
  series: []
})

// 柱状图
const bars = ref({
  xAxis: {
    type: 'category',
    data: []
  },
  yAxis: {
    type: 'value'
  },
  legend: {
    data: []
  },
  series: []
});

// 饼图
const option = ref({
      title: {
        text: "饼图",
        left: "center"
      },
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      legend: {
        orient: "vertical",
        left: "left",
      },
      series: [
        {
          name: "提示",
          type: "pie",
          radius: "55%",
          center: ["50%", "60%"],
          data: [
            { value: 335, name: "周一" },
            { value: 310, name: "周二" },
            { value: 234, name: "周三" },
            { value: 135, name: "周四" },
            { value: 1548, name: "周五" }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            }
          }
        }
      ]
    });


interface Device {
  room: string
  device: string
  num: number
  date: string
}

const tableCol = {
  room: "房间号",
  device: "设备名称",
  num: "数量",
  date: "购买日期"
}

let tableData: Device[] = ref<Device[]>([]);
// let tableData: Device[] = ref<Device[]>([]);

const countData = [
  {
    name: "今日借用",
    value: 12,
    icon: "AlarmClock",
    color: "#2ec7c9"
  },
  {
    name: "今日领用",
    value: 3,
    icon: "Bell",
    color: "#ffb989"
  },
  {
    name: "今日支付",
    value: 120,
    icon: "Brush",
    color: "#5ab1ef"
  },
  {
    name: "今日借用",
    value: 12,
    icon: "Cherry",
    color: "#2ec7c9"
  },
  {
    name: "今日借用",
    value: 12,
    icon: "Coin",
    color: "#2ec7c9"
  },
  {
    name: "今日借用",
    value: 12,
    icon: "ColdDrink",
    color: "#2ec7c9"
  },
  {
    name: "今日借用",
    value: 12,
    icon: "Eleme",
    color: "#2ec7c9"
  },
  {
    name: "今日借用",
    value: 12,
    icon: "ElementPlus",
    color: "#2ec7c9"
  },
]
</script>

<style lang="less" scoped>
.card-header {
  display: flex;
  // justify-content: space-around;
  align-items: center;
  margin: 0;

  .userInfo {
    margin-left: 30px;
    padding: 0;
    .name {
      font-size: 20px;
    }
    .access {
      font-size: 12px;
      color: #888;
    }
  }
}

.text {
  font-size: 12px;
}

.item {
  margin-bottom: 10px;
}

.graph {
  margin: 10px;
  display: flex;
}

.box-card {
  width: 100%;
  padding: 0 !important;
}

.conts {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-left: 10px;
  .el-card {
    margin: 0 0 10px 10px;
    display: flex;
    align-items: center;
  }
  .el-icon {
    font-size: 32px;
    margin-right: 10px;
  }
  .detail {
    width: 80px;

    .num {
      font-size: 16px;
    }
    .txt {
      font-size: 8px;
    }
  }
}
</style>